import React, { useState } from "react";
import { Popup, Steps } from "antd-mobile";
import styles from "./index.module.css";

const { Step } = Steps;
const Index = (props) => {
  const { data } = props;
  const [visible1, setVisible1] = useState(false);
  return (
    <div>
      <div className={styles.listItem}>
        <div className={styles.item_left}>
          <span>{data.start}</span>
          <span>{data.end}</span>
          <span>{data.startTime}</span>
          <span>
            一等座 <b>有票</b>
          </span>
          <span>
            二等座 <b>有票</b>
          </span>
          <span>
            商务座 <b>有票</b>
          </span>
        </div>
        <span className={styles.tick_tag} onClick={() => setVisible1(true)}>
          经停站
        </span>
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <Steps direction="vertical">
          <Step title="北京" status="finish" description="完成时间：12:30" />
          <Step title="天津" status="finish" description="完成时间：13:30" />
          <Step title="石家庄" status="finish" description="完成时间：14:30" />
          <Step title="郑州" status="finish" description="完成时间：16:30" />
          <Step title="武汉" status="finish" description="完成时间：18:30" />
          <Step title="长沙" status="finish" description="完成时间：17:30" />
          <Step title="深圳" status="finish" description="完成时间：19:30" />
          <Step title="广州" status="finish" description="完成时间：20:30" />
        </Steps>
      </Popup>
    </div>
  );
};

export default Index;
